<template>
  <view v-if="!!modelValue" class="bb">
    <view v-if="row" class="GoodsItem row x oh bb GoodsItem-top">
      <view v-if="edit" class="mac-ico-delete" @click.stop="del" />
      <image :src="img" mode="aspectFill" class="fg1 wf GoodsItem-top-image row-image" webp
        show-menu-by-longpress @click="click" />
      <view class="label y nsx label-row">
        <view class="name">
          <text class="is_shiwu" v-if="modelValue.tagOne">「{{ modelValue.tagOne }}」</text>
          {{ modelValue.name }}
        </view>
        <view class="info wf x je">
          <view class="sum x jc" v-if="showSum">
            <!-- <text class="txt-hid">数量:</text> -->
            <view class="sumbtn sub" @click="sub" v-if="edit">-</view>
            <text class="content">
              <text v-if="!edit">共</text>
              {{ sum }}
              <text v-if="!edit">件</text>
            </text>
            <view class="sumbtn add" @click="add" v-if="edit">+</view>
          </view>
          <view class="fg1 x je money" v-if="go">
            <text>单价:</text>
            <view class="mac-ico-jiage" />
            <text>{{ (money || modelValue.money) / 100 }}</text>
          </view>
        </view>
        <view class="goods-sold">{{ modelValue.sold ? modelValue.sold : 0 }} 已销售</view>
      </view>
      <view class="mac-ico-cart" v-if="cartAdd" @click="cart(modelValue)"></view>
    </view>
    <view v-else class="GoodsItem y oh bb GoodsItem-bottom">
      <view v-if="edit" class="mac-ico-delete" @click.stop="del" />
      <image :src="img" mode="aspectFill" class="fg1 wf" webp show-menu-by-longpress @click="click" />
      <view class="label y nsx">
        <view class="name">
          <text class="is_shiwu" v-if="modelValue.tagOne">「{{ modelValue.tagOne }}」</text>
          {{ modelValue.name }}
        </view>
        <view class="wf x je">
          <view class="sum x jc" v-if="showSum"><text class="txt-hid">数量:</text>
            <view class="sumbtn sub" @click="sub" v-if="edit">-</view>
            <text class="content">{{ sum }}</text>
            <view class="sumbtn add" @click="add" v-if="edit">+</view>
          </view>
          <view class="fg1 x je goods-info" v-if="go">
            <!-- <view v-if="modelValue._goodsType && modelValue._goodsType.name" class="type"> {{ modelValue._goodsType.name }} </view> -->
            <view class="money">
              <view class="mac-ico-jiage" />
              <text>{{ modelValue.money / 100 }}</text>
            </view>
            <view class="mac-ico-cart" @click="cart(modelValue)"></view>
          </view>
        </view>
        <view class="recommend">
          <view class="recommend-view" v-if="modelValue.tagTow">{{ modelValue.tagTow }}</view>
        </view>
        <view class="goods-sold">{{ modelValue.sold ? modelValue.sold : 0 }} 已销售</view>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
  import { ref, PropType, computed } from "vue";
  let rmax = 0;
  const props = defineProps({
    modelValue: { type: Object as PropType<gt.sql.goods> },
    row: { type: Boolean }, edit: { type: Boolean }, cartAdd: { type: Boolean },
    sum: { type: Number }, money: { type: Number },
    min: { type: Number, default: 1 }, max: { type: Number }
  }), img = ref(""), emit = defineEmits<{
    (e: "del", v: gt.sql.goods): void;
    (e: "update:sum", v: number): void;
    (e: "updatesum", v: number): void;
  }>(),
    showSum = computed(() => {
      return typeof props.sum != "undefined";
    }),
    go = ref(true);
  async function init() {
    if (props.modelValue) {
      go.value = !!props.modelValue.banner?.length;
      img.value = go.value ? props.modelValue.banner[0].url : props.modelValue.image;
    }
    if (props.edit) {
      rmax = props.max || parseInt(await getSetting("goodsmax")) || 100;
    }
  }
  init();

  async function cart(p: any) {
    const n = 1;
    if (!n) { return; }
    const c: { goods: string; sum: number; gid: string; }[] = uni.getStorageSync("cart") || [],
      i = c.findIndex(e => e.goods == p.id);
    if (i >= 0) {
      c[i].sum += n;
    } else {
      c.push({ gid: uni.getStorageSync("gid"), goods: p.id, sum: n });
    }
    msg({ title: "添加购物车成功", icon: "success" });
    uni.setStorageSync("cart", c);
  }

  function click() {
    if (go.value) {
      uni.navigateTo({ url: `/pages2/goods?id=${props.modelValue?.id}&gid=${uni.getStorageSync("gid")}` });
    }
  }
  function del() {
    if (props.modelValue) {
      emit("del", props.modelValue);
    }
  }
  function sub() {
    if (typeof props.sum != "undefined" && props.sum > props.min) {
      emit("updatesum", props.sum - 1);
      emit("update:sum", props.sum - 1);
    }
  }
  function add() {
    if (typeof props.sum != "undefined" && props.sum < rmax) {
      emit("updatesum", props.sum + 1);
      emit("update:sum", props.sum + 1);
    }
  }
</script>
<style lang="scss" scoped>
  .GoodsItem {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    margin-top: 0.4em;
    background-color: #fff;
    box-sizing: border-box;
    .label {
      flex-shrink: 0;
      padding: .5em .3em;
      .money {
        display: flex;
        align-items: center;
        color: #f44336;
        font-size: .8em;
      }
      .name {
        font-size: .8em;
        .is_shiwu {
          margin-right: .2em;
          font-size: 1em;
          color: #ff9800;
        }
      }
      .recommend {
        display: flex;
        &-view {
          margin-right: .4em;
          border-radius: .2em;
          color: #FFFFFF;
          font-size: .6em;
          padding: .2em .6em;
          background-color: #4caf50;
        }
      }
    }
    .goods-info {
      justify-content: space-between;
      padding: .3em 0;
    }
    .goods-sold {
      font-size: .7em;
      color: #9e9e9e;
      margin-top: .3em;
    }
    .sum {
      .sub {
        transform: scale(1.4);
      }
      .add {
        transform: scale(1.4);
      }
      .content {
        padding: 0 .3em;
        font-size: 1em;
      }
      >.sumbtn {
        margin: 0 0.4em;
      }
    }
    .mac-ico-delete {
      position: absolute;
      right: 1em;
      top: .3em !important;
      z-index: 1;
      color: $uni-color-error;
      font-size: 1.4em;
      font-weight: 600;
      border-radius: 50%;
      padding: 0.2em;
    }
  }
  .GoodsItem-top {
    margin-top: .2em;
    padding: .5em .4em;
    &-image {
      border-radius: 0.4em;
    }
  }
  .GoodsItem-bottom {
    border-radius: .4em;
  }
  .mac-ico-cart {
    font-size: .9em;
    color: #FFFFFF;
    font-weight: 500;
    background-color: #f44336;
    border-radius: 50%;
    height: 1.8em;
    min-height: 1.8em;
    width: 1.8em;
    min-width: 1.8em;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .row {
    aspect-ratio: inherit;
    margin: .5em 0 0 0;
    padding-right: 0.2em;
    >.mac-ico-delete {
      top: 0;
      font-size: 1em;
    }
    &-image {
      height: 4em;
      width: 4em;
      flex-grow: 0;
      flex-shrink: 0;
    }
    >.label {
      flex-grow: 1;
      flex-shrink: 1;
      overflow: hidden;
      >.info {
        margin-top: 0.4em;
      }
    }
    .label-row {
      padding: 0 .3em;
    }
  }
  .type {
    padding: .3em .5em;
    background: #673AB7;
    color: #FFFFFF;
    border-radius: 4px;
    font-size: .7em;
    margin-right: .7em
  }
</style>